<route lang="json5">
  {
    style: {
        navigationBarTitleText: '收货地址',
    },
  }
  </route>
<template>
  <view class="container">
    <view class="address-list">
      <radio-group>
        <view v-for="(address, index) in addressList" :key="index" class="address-item"
          @click="handleSelectAddress(address)">
          <view class="address-content">
            <view class="address-location">
              <text class="location-text">
                {{ address.con }}
              </text>
            </view>
            <view class="address-detail">
              <text class="detail-text">{{ address.cont }}</text>
            </view>
            <view class="address-user">
              <text class="user-name">{{ address.name }}</text>
              <text class="user-phone">{{ address.phone }}</text>
            </view>
          </view>
          <view class="flex flex-col items-end">
            <view class="flex flex-row items-center justify-end">
              <view class="edit-icon" @click.stop="handleEditAddress(address)">
                <uni-icons type="compose" size="20" color="#999999"></uni-icons>
              </view>
              <view class="delete-icon" @click.stop="handleRemoveAddress(address)">
                <uni-icons type="trash" size="20" color="#999999"></uni-icons>
              </view>
            </view>

            <view class="text-xs mt-2 flex items-center justify-end">

              <label>
                <radio :value="address.id" :checked="address.is_default" style="transform: scale(0.7)"
                  @click="handleDefaultAddress(address)" color="#1890ff" />

              </label>
              <text class="text-xs text-gray-500">{{ address.is_default ? '已默认' : '设置默认' }}</text>
            </view>
          </view>


        </view>
      </radio-group>
    </view>

    <view class="bottom-button">
      <button class="add-button" @click="handleAddAddress">新增收货地址</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getAddressListAPI, postSetDefaultAddressAPI, postAddressDeleteAPI } from '@/service/index'
import { useUserStore } from '@/store/user'
interface AddressInfo {
  id: number
  name: string
  phone: string
  is_default: number
  cont: string
}

const addressList = ref<AddressInfo[]>([])

const handleSelectAddress = (address: AddressInfo) => {

  uni.navigateBack({
    delta: 1
  })
}

const handleEditAddress = (address: AddressInfo) => {

  uni.navigateTo({
    url: '/pages/my/address_edit?id=' + address.id
  })
}

const handleAddAddress = () => {
  uni.navigateTo({
    url: '/pages/my/address_add'
  })
}

const handleRemoveAddress = (address: AddressInfo) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该地址吗？',
    success: (res) => {
      if (res.confirm) {
        postAddressDeleteAPI({ id: address.id }).then((res) => {
          if (res.code === 1) {
            uni.showToast({
              title: '删除成功',
              icon: 'success',
            })
          }
          getAddressList()
        })
      }
    }
  })
}

const handleDefaultAddress = (address: AddressInfo) => {
  postSetDefaultAddressAPI({ id: address.id }).then((res) => {
    if (res.code === 1) {
      uni.showToast({
        title: '设置默认地址成功',
        icon: 'success',
      })
      setTimeout(() => {
        getAddressList()
      }, 1000)
    } else {
      uni.showToast({
        title: '设置默认地址失败',
        icon: 'none',
      })
    }
  })
}

const getAddressList = () => {
  getAddressListAPI().then((res) => {
    console.log(res)
    if (res.code === 1) {
      addressList.value = res.data
    }
  })
}

onShow(() => {
  getAddressList()
})

//#ifdef APP-PLUS || MP-WEIXIN
onLoad(() => {
  if (!useUserStore().userInfo.token) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
    return
  }
  getAddressList()
})
//#endif

//#ifdef H5
onMounted(() => {
  if (!useUserStore().userInfo.token) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
    return
  }
  getAddressList()
})

//#endif
</script>

<style>
page {
  height: 100%;
  background-color: #f5f5f5;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.address-list {
  flex: 1;
  padding: 20rpx;
}

.address-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.address-content {
  flex: 1;
  margin-right: 20rpx;
}

.address-location {
  margin-bottom: 16rpx;
}

.location-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.address-detail {
  margin-bottom: 16rpx;
}

.detail-text {
  font-size: 28rpx;
  color: #666666;
}

.address-user {
  display: flex;
  align-items: center;
}

.user-name {
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666666;
}

.user-phone {
  font-size: 28rpx;
  color: #666666;
}

.edit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
}

.bottom-button {
  padding: 20rpx 30rpx 40rpx;
}

.add-button {
  height: 88rpx;
  font-size: 32rpx;
  line-height: 88rpx;
  color: #ffffff;
  background-color: #1890ff;
  border-radius: 44rpx;
}

.add-button:active {
  opacity: 0.8;
}
</style>
